<template>
  <q-page :class="$q.screen.xs ? '' : 'q-pa-md'">
    <q-tabs v-model="tab" dense class="text-primary bg-grey-4 q-mb-sm" active-color="white" active-bg-color="primary" indicator-color="blue-10" align="left">
      <q-tab name="list" label="数据" />
      <q-tab name="task" label="任务">
        <q-badge color="red" floating v-if="taskNumber > 0">{{ taskNumber }}</q-badge>
      </q-tab>
      <q-tab name="summary" label="统计汇总" />
    </q-tabs>

    <q-tab-panels v-model="tab" animated keep-alive>
      <q-tab-panel style="padding: 4px;" name="list">
        <router-view v-slot="{ Component }">
          <component :is="Component" ref="component" />
        </router-view>
      </q-tab-panel>
      <q-tab-panel style="padding: 4px;" name="task">
        <taskPage ref="task" @do="doTask" />
      </q-tab-panel>
      <q-tab-panel style="padding: 4px;" name="summary">
        <summaryPage />
      </q-tab-panel>
    </q-tab-panels>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';
import summaryPage from './summary.vue';
import taskPage from './task.vue';
import { indexPageMix } from 'src/lib/mixin.js';

export default defineComponent({
  name: 'deliveryIndex',
  components: {
    summaryPage,
    taskPage
  },
  mixins: [indexPageMix],
  setup (props, context) {
    const moduleName = 'delivery';
    const taskNumApi = `/c2/tenant/${moduleName}/taskNumber`; // 任务数量

    return {
      moduleName,
      taskNumApi
    }
  },
  data () {
    return {
      tab: 'list'
    }
  },
  async created () {
    this.initDict(['customer', 'material']);
    this.refreshTaskNumber();
    this.$nextTick(() => {
      const path = this.$route.path.split('/');
      if (path[3] === 'task') {
        this.tab = 'task';
      }
    });
  },
  methods: {
    doTask (ids) {
      this.tab = 'list';
    }
  },
  watch: {
    tab (val) {
      this.refreshTaskNumber();
      if (val === 'task') { // 去任务页时，回返到list
        this.$router.push({ path: `/main/${this.moduleName}/list` });
        this.$refs.task && this.$refs.task.search();
      }
    },
    '$route' (val) {
      this.refreshTaskNumber();
    }
  }
});
</script>
